import React, { memo, useEffect } from "react";
import HomeWrapper from "./style";
import HomeBanner from "./c-cpns/home-banner/home-banner";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { getGoodHomeAsync } from "@/store/modules/home";
import { isEmptyO } from "@/utils";
import SectionHomeV1 from "./c-cpns/home-section-v1";
import SectionHomeV2 from "./c-cpns/home-section-v2";
import HomeLongfor from "./c-cpns/home-longfor";
import SectionHomeV3 from "./c-cpns/home-section-v3";

const Home = memo(() => {
  // selector获取redux定义的数据
  const {
    goodPriceInfo,
    highGoodInfo,
    discountInfo,
    hotrecommendInfo,
    longforInfo,
    plusInfo,
  } = useSelector(
    (state) => ({
      goodPriceInfo: state.home.goodPriceState,
      highGoodInfo: state.home.highScoreState,
      discountInfo: state.home.discountState,
      hotrecommendInfo: state.home.hotrecommendState,
      longforInfo: state.home.longforState,
      plusInfo: state.home.plusState,
    }),
    shallowEqual
  );

  // dispatch获取redux定义的方法
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getGoodHomeAsync("xxxx"));
  }, [dispatch]);

  return (
    <HomeWrapper>
      {/* 首页大屏图片 */}
      <HomeBanner />
      <div className="content">
        {/* 折扣 */}
        {isEmptyO(discountInfo) && <SectionHomeV2 itemData={discountInfo} />}
        {isEmptyO(hotrecommendInfo) && <SectionHomeV2 itemData={hotrecommendInfo} />}
        {/* 封装一整长方形，想去的城市房源 */}
        {isEmptyO(longforInfo) && <HomeLongfor itemData={longforInfo} />}
        {/* c-cpns/下的组件 */}
        {isEmptyO(goodPriceInfo) && <SectionHomeV1 itemData={goodPriceInfo} />}
        {isEmptyO(highGoodInfo) && <SectionHomeV1 itemData={highGoodInfo} />}
        {/* plus房源 */}
        {isEmptyO(plusInfo) && <SectionHomeV3 itemData={plusInfo} />}
      </div>
    </HomeWrapper>
  );
});

export default Home;
